<template>
	<view class="search-container">
		<uni-search-bar radius="100" @input="input" cancelButton="none">
		</uni-search-bar>
		<button @click="gotoGoodsList">
			搜索
		</button>
	</view>
	<scroll-view class="search-result" v-if="searchResult.length>0">
		<view class="search-result-item" v-for="(item,i) in searchResult" :key="i" @click="gotoDetail(item.id)">
			<uni-icons type="search"></uni-icons>
			{{item.goods_name}}
		</view>
	</scroll-view>
	<view v-else class="history-box">
		<view class="history-title">
			<text>搜索历史</text>
			<uni-icons type="trash" size="25" @click="clearHistory"></uni-icons>
		</view>
		<view class="history-list">
			<uni-tag :text="item" v-for="(item,i) in historys" :key="i" class="history-item" @click="gotoGoodsListByHistory(item)"></uni-tag>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				timer:null,
				kw:'',
				searchResult:[],
				historyList:Array()
			}
		},
		onLoad(){

			this.historyList = JSON.parse(uni.getStorageSync('kw') || '[]')

		},
		computed:{
			historys(){
				return [...this.historyList].reverse()
			}
		},
		methods:{
			input(e){
				clearTimeout(this.timer)
				this.timer = setTimeout(()=>{
					this.kw=e
					this.getSearchList()
				},500)
				
			},
			async getSearchList(){
				if(this.kw==""){
					console.log("查询字符串为空")
				}else{
					const {data:res} = await uni.$http.get("/api/public/v1/goods/search?query="+this.kw+"&pagenum=1&pagesize=10")
					if (res.meta.status == 200){
						this.searchResult = res.message
						console.log(this.searchResult)
					}else{
						uni.$showMsg()
					}
				}
				
				
			},
			gotoDetail(goods_id){
				if (this.historyList.indexOf(this.kw)==-1){
					this.historyList.push(this.kw)
					uni.setStorageSync('kw',JSON.stringify(this.historyList))
				}
				uni.navigateTo({
					url:'/subpkg/goods_detail/goods_detail?goods_id='+goods_id
				})
			},
			clearHistory(){
				this.historyList=[]
				uni.setStorageSync('kw', '[]')
			},
			gotoGoodsListByHistory(kw){
				uni.navigateTo({
					url:'/subpkg/goods_list/goods_list?query='+kw
				})
			},
			gotoGoodsList(){
				if(this.kw!=""){
					if (this.historyList.indexOf(this.kw)==-1){
						this.historyList.push(this.kw)
						uni.setStorageSync('kw',JSON.stringify(this.historyList))
					}
					uni.navigateTo({
						url:'/subpkg/goods_list/goods_list?query='+this.kw
					})
				}else{
					uni.$showMsg("查询关键字不能为空")
				}
			}
		}
	}
</script>

<style lang="scss">
	.search-container {
	  position: sticky;
	  top: 0;
	  z-index: 999;
	  .uni-searchbar{
		  background-color: green;
	  }
	  display: flex;
	  background-color: green;
      align-items: center;
	  button{
		  border-radius: 30%;
		  background-color: darkgreen;
		  color: white;
		  height: 100rpx;
		  line-height: 100rpx;
	  }
	}
	.search-result{
		border-radius: 15px;
		width: 750rpx;
		height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.search-result-item{
			height: 30px;
			line-height: 30px;
			white-space: nowrap;
			overflow:hidden;
			text-overflow:ellipsis;
			margin: 0rpx,5px;
			padding: 5px;
			font-size: 12px;
			border: 1px solid darkgray;
		}
	}
	.history-box{
		display: flex;
		flex-direction: column;
		.history-title{
			display: flex;
			justify-content: space-between;
			font-size: 12px;
			align-items: center;
			height: 40px;
			border-bottom: 1px solid #efefefef;
		}
		.history-list{
			display: flex;
			flex-wrap: wrap;
			.history-item{
				//background-color: bisque;
				margin-left: 10px;
				margin-top: 5px;
			}
		}
		
	}
</style>
